<template>
  <div class="shop-container">
    <!-- 搜索 -->
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #title>
        <van-search
          shape="round"
          v-model="value"
          placeholder="请输入商品名称搜索"
          @search="onSearch"
        />
      </template>
    </van-nav-bar>
    <!-- card卡片 -->
    <div class="card">
      <van-card
        :key="item._id"
        :thumb-link="`http://localhost:8080/#/shop/${item._id}`"
        :desc="`月售${item.sales}&nbsp&nbsp&nbsp&nbsp&nbsp起送${item.expressLimit}元&nbsp&nbsp&nbsp基础运费￥${item.expressPrice}`"
        :title="`${item.name}`"
        :price="`${item.slogan}`"
        currency=""
        :thumb="`${item.imgUrl}`"
      >
      </van-card>
    </div>
    <!-- 商品列表 -->
    <div style="display: flex; height: 515px; overflow: scroll">
      <!-- tab选项卡 -->
      <van-sidebar v-model="active" @change="onChange">
        <van-sidebar-item
          v-for="item in categories"
          :key="item.name"
          :title="item.name"
        />
      </van-sidebar>
      <!-- 切换卡 -->
      <div class="b-right">
        <van-card
          v-for="item in list"
          :key="item._id"
          :desc="`月售${item.sales}件`"
          :title="`${item.name}`"
          :price="`${item.price}`"
          :thumb="`${item.imgUrl}`"
          :origin-price="`${item.oldPrice}`"
        >
          <template #num>
            <van-stepper
              theme="round"
              button-size="16"
              disable-input
              default-value="0"
              min="0"
              @click="addshop(item._id)"
            />
          </template>
        </van-card>
      </div>
    </div>
    <!-- 去结算 -->
    <van-submit-bar
      :price="3050"
      button-text="去结算"
      button-type="primary"
      text-align="left"
      @submit="onSubmit"
    >
      <template #default>
        <van-icon
          @click="show = true"
          name="shopping-cart"
          badge="9"
          size="28"
        />
      </template>
    </van-submit-bar>
    <!-- 遮罩层 -->
    <van-overlay :show="show" @click="show = false">
      <van-checkbox-group v-model="checked" ref="checkboxGroup" @click.stop>
        <van-cell-group>
          <van-cell value="清空购物车">
            <template #title class="all">
              <van-checkbox @click="checkAll">全选</van-checkbox>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <van-checkbox name="a"></van-checkbox>
            </template>
            <template #value>
              <van-card
                :title="`番茄250g/份`"
                :price="`1234`"
                :thumb="`https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg`"
                :origin-price="`33.6`"
              >
                <template #num>
                  <van-stepper
                    :v-model="`123`"
                    theme="round"
                    button-size="16"
                    disable-input
                  />
                </template>
              </van-card>
            </template>
          </van-cell>
          <van-cell>
            <template #title>
              <van-checkbox name="b"></van-checkbox>
            </template>
            <template #value>
              <van-card
                :title="`番茄250g/份`"
                :price="`1234`"
                :thumb="`https://cdn.jsdelivr.net/npm/@vant/assets/ipad.jpeg`"
                :origin-price="`33.6`"
              >
                <template #num>
                  <van-stepper
                    :v-model="`123`"
                    theme="round"
                    button-size="16"
                    disable-input
                  />
                </template>
              </van-card>
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
    </van-overlay>
  </div>
</template>

<script>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, toRefs, watchEffect } from "vue";
import { get } from "../../utils/request";
import { Toast } from "vant";
// 获取当前商铺信息
const useShopInfoEffect = () => {
  const route = useRoute();
  const data = reactive({ item: {} });
  const getItemData = async () => {
    const result = await get(`/api/shop/${route.params.id}`);
    if (result?.errno === 0 && result?.data) {
      data.item = result.data;
    }
    console.log("----------");
    console.log(data);
  };
  const { item } = toRefs(data);
  return { item, getItemData };
};
//
const categories = [
  { name: "全部商品", tab: "all" },
  { name: "秒杀", tab: "seckill" },
  { name: "新鲜水果", tab: "fruit" },
];
//获取商品列表
const useCurrentListEffect = (currentTab, shopId) => {
  const content = reactive({ list: [] });
  const getContentData = async () => {
    const result = await get(`/api/shop/${shopId}/products`, {
      tab: currentTab,
    });
    if (result?.errno === 0 && result?.data?.length) {
      content.list = result.data;
    }
    console.log(list);
  };
  watchEffect(() => {
    getContentData();
  });
  const { list } = toRefs(content);
  console.log(list);
  return { list };
};
export default {
  name: "shop",
  setup() {
    const route = useRoute();
    const router = useRouter();
    const onClickLeft = () => history.back();
    const value = ref("");
    const active = ref(0);
    const onSearch = (val) => Toast(val);
    let currentTab = "";
    const shopId = route.params.id;
    let { list } = useCurrentListEffect(currentTab, shopId);
    const onChange = (index) => {
      currentTab = categories[index].tab;
      list = useCurrentListEffect(currentTab, shopId);
    };
    const { item, getItemData } = useShopInfoEffect();
    const show = ref(false);
    const checked = ref([]);
    const checkboxGroup = ref(null);
    const checkAll = () => {
      checkboxGroup.value.toggleAll(true);
    };
    const onSubmit = () => {
      router.push("/shop-car");
    };
    const addshop = (id) => {
      console.log(list._object.list[id - 1]);
    };
    getItemData();
    return {
      onClickLeft,
      active,
      value,
      onSearch,
      item,
      categories,
      onChange,
      list,
      shopId,
      show,
      checked,
      checkboxGroup,
      checkAll,
      onSubmit,
      addshop,
    };
  },
};
</script>

<style lang="less" scoped>
.shop-container {
  margin-top: 20px;
  .van-search {
    padding: 0;
  }
}
.card {
  background: #f7f8fa;
  text-align: left;
  h2 {
    padding-top: 10px;
    padding-left: 20px;
    text-align: left;
  }
  /deep/.van-card__header {
    align-items: center;
  }
  /deep/.van-card__thumb {
    width: 56px !important;
    height: 56px !important;
  }
  /deep/.van-card__content {
    justify-content: center;
    margin-left: 8px;
  }
  /deep/.van-card__price-integer {
    font-size: 13px;
    color: #e93b3b;
  }
  /deep/.van-card__desc {
    font-size: 13px;
    color: #333333;
    margin: 7px 0;
  }
  /deep/.van-card__title {
    font-size: 16px;
  }
}
.b-right {
  flex: 1;
  background: #fff;
  .van-card {
    text-align: left;
    margin-top: 0;
    background: #fff;
    /deep/.van-card__content {
      margin-left: 10px;
    }
    /deep/.van-card__header {
      align-items: center;
      border-bottom: 1px solid #666;
      border-collapse: separate;
      border-spacing: 10px 2px;
    }
    /deep/.van-card__thumb {
      width: 68px !important;
      height: 68px !important;
      img {
        border-radius: 0;
      }
    }
    /deep/.van-card__title {
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
      color: #333;
    }
    /deep/.van-card__desc {
      color: #333;
      margin: 7px 0;
    }
    /deep/.van-card__price {
      font-size: 10px;
      color: #e93b3b;
    }
  }
}
/deep/.van-stepper--round .van-stepper__plus {
  background: #0091ff;
}
/deep/.van-stepper--round .van-stepper__minus {
  color: #666666;
  border: 0.02667rem solid #666666;
}
/deep/.van-submit-bar__button {
  border-radius: 0;
  height: 100%;
  right: -16px;
}
/deep/.van-submit-bar__text {
  margin-left: 40px;
}
.van-overlay {
  /deep/.van-cell__value {
    flex: 9;
  }
  /deep/.van-cell__title {
    display: flex;
  }
  .van-checkbox-group {
    width: 100%;
    position: fixed;
    bottom: 51px;
    left: 0;
  }
  .van-cell:nth-child(1) {
    /deep/.van-cell__title {
      flex: 2;
    }
  }
  .van-card {
    text-align: left;
    margin-top: 0;
    padding: 0;
    background: #fff;
    /deep/.van-card__content {
      margin-left: 10px;
      min-height: 60px;
      max-height: 60px;
    }
    /deep/.van-card__header {
      align-items: center;
      border-collapse: separate;
      border-spacing: 10px 2px;
    }
    /deep/.van-card__thumb {
      width: 46px !important;
      height: 46px !important;
      img {
        border-radius: 0;
      }
    }
    /deep/.van-card__title {
      font-size: 14px;
      font-weight: 700;
      margin-top: 10px;
      color: #333;
    }
    /deep/.van-card__desc {
      color: #333;
      margin: 7px 0;
    }
    /deep/.van-card__price {
      font-size: 10px;
      color: #e93b3b;
    }
  }
}
</style>